<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	import LjLayout from "@/pages_nbst/components/lj-layout.vue"
	import {
		getExamListReq
	} from '@/pages_nbst/api/exam.js'
	import {
		getTypeByValue,
		TypeEnter,
		TypeOut
	} from '@/pages_nbst/utils/exam-common-const.js'

	onLoad(q => {
		getExamList()
	})

	const examList = ref([])
	const pageSize = ref(10)
	const page = ref(1)
	const total = ref(0)
	const loadMoreStatus = ref('loadmore')
	const getExamList = () => {
		loadMoreStatus.value = 'loading'
		getExamListReq({
			pageSize: pageSize.value,
			page: page.value++
		}).then(res => {
			examList.value = res.list
			total.value = res.total
			loadMoreStatus.value = examList.value.length >= res.total ? 'nomore' : 'loadmore'
		})
	}
	const onClickDetail = (item) => {
		if (item.exam.type === TypeOut || item.exam.type === TypeEnter) {
			uni.navigateTo({
				url: '/pages_nbst/views/my/userpageexam?id=' + item.user_page_exam[0].id
			})
		}
	}
</script>

<template>
	<LjLayout>
		<view style="padding:70rpx 40rpx;">
			<view style="min-height: 90vh;background-color: white;border-radius: 10rpx;">
				<uv-list custom-style="border-radius: 10rpx;">
					<uv-list-item v-for="(item, index) in examList" :key='index' border clickable link
						custom-style="border-radius: 10rpx" @click="onClickDetail(item)">
						<template v-slot:header>
							[{{getTypeByValue(item.exam.type).label}}]{{item.exam.label}}
						</template>
					</uv-list-item>
				</uv-list>
				<uv-load-more marginTop='20' marginBottom='20' :status="loadMoreStatus" loadmore-text="点击加载更多" dashed line @loadmore="getExamList()" />
			</view>
		</view>
	</LjLayout>
</template>

<style scoped lang="scss">
	.a {
		border-radius: 10rpx;
	}
</style>